<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Alpine.js x-on directive.</title>

  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!--01. x-on basic-->
<div>
  <button type="button" x-data x-on:click="console.log('Hello')">Click Me</button>
</div>

<!--02. shorthand syntax-->
<div>
  <button type="button" x-data @click="console.log('Hello')">Click Me</button>
</div>

<!--03. get javascript event object-->
<div>
  <button type="button" x-data @click="console.log($event.target.getAttribute('message'))" message="Hello World">Say Hi
  </button>
</div>

<div>
  <button x-data @click="handleClick">Click Me</button>
  <script>
  const handleClick = e => {
    console.log(e.target)
  };
  </script>
</div>

<!--04. keyup event-->
<div>
  <input x-data type="text" @keyup.enter="alert('Keyup and enter submitted!')"/>
</div>
<div>
  <input x-data type="text" @keyup.up="alert('Keyup and up submitted!')"/>
</div>

<!--05. custom event-->
<div x-data @custom-event="console.log('Click dispatchEvent button was clicked!')">
  <button @click="$event.target.dispatchEvent(new CustomEvent('custom-event', { bubbles: true }))">Click dispatchEvent
  </button>
</div>
<div x-data @custom-event="console.log('Click $dispatch button was Clicked!')">
  <button @click="$dispatch('custom-event')">Click $dispatch</button>
</div>
<button x-data @click="$dispatch('my-custom-event', {key: 'value'})">Click $dispatch</button>
<script>
window.addEventListener('my-custom-event', (e) => console.log(e.detail.key))
</script>

<!--06. modifiers-->
<form x-data @submit.prevent="console.log('Form submitted')" action="/url">
  <button type="submit">Submit</button>
</form>
<div x-data @click="console.log('We will not get logged')">
  <button type="button" @click.stop>Click Me</button>
</div>
<div x-data="{ open: false }">
  <button @click="open = ! open">Toggle</button>

  <div x-show="open" @click.outside="open = false">
    Contents
  </div>
</div>
<div>
  <button x-data @keyup.escape.window="console.log('escape Window alarm')">Click Me</button>
</div>

<div>
  <button x-data @keyup.escape.document="console.log('escape document alarm')">Click Me</button>
</div>

<div>
  <button x-data @click.once="console.log('I will only log once')">Click Me</button>
</div>

<div>
  <input x-data @input.debounce="fetch(`/some-uri/${$event.target.value}`)"/>
</div>
<div>
  <input x-data @input.debounce.1500ms="fetch(`/some-uri/${$event.target.value}`)"/>
</div>

<div>
  <div x-data @scroll.window.throttle="console.log('window scroll throttle')"></div>
</div>
<div>
  <div x-data @scroll.window.throttle.1500ms="console.log('window scroll throttle using custom seconds')"></div>
</div>

<div>
  <button x-data @click.self="console.log('handle click.')">
    Click Me

    <img src="https://alpinejs.dev/alpine_long.svg">
  </button>
</div>

<div>
  <button x-data
          @custom-event.camel="console.log('handle custom event')"
          @click="$dispatch('customEvent', {key: 'value'})">
    Click Me
  </button>
</div>

<div>
  <button x-data
          @custom-event.dot="console.log('handle custom event', $event.detail)"
          @click="$dispatch('custom.event', {key: 'value'})">
    Click Me
  </button>
</div>

<div>
  <div x-data @mouseup.passive="console.log('mouseup passive')">mouseup passive</div>
</div>

</body>
</html>